<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" value="" disabled id="btn0"><br>
    <input type="button" value="1" id="btn1">
    <input type="button" value="2" id="btn2">
    <input type="button" value="*" id="btn3">
    <input type="button" value="=" id="btn4">
    <script>
        /* 
            给btn1身上绑定一个点击事件,然后让text文本显示那个1
        */
        var str = "";//这个存储的计算的内容
        //给btn1绑定一个点击事件
        btn1.onclick = function () {
            str += btn1.value;//将btn1的value追加到str里面去
            btn0.value = str;//给显示的那个文本框来一份
        }
        //给btn3绑定一个点击事件
        btn3.onclick = function () {
            str += btn3.value
            btn0.value = str;
        }
        //给btn2绑定一个点击事件
        btn2.onclick = function () {
            str += btn2.value//将btn2的value追加到str
            btn0.value = str;
        }
        //点击等号对str进行计算结果
        btn4.onclick = function () {
            // console.log(str);
            var arr = str.split("*")//拆出来的结果就是一个数组
            // console.log(arr[0] * arr[1]);
            btn0.value = arr[0] * arr[1];
            //当点击等号的时候,就是计算完成了,完成了将字符串清空
            str = "";
        }
    </script>
</body>

</html>